<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title></title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport"
    content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <link rel="stylesheet" href="../../static/lib/layui/css/layui.css" media="all" />
  <link rel="stylesheet" href="../../static/css/admin.css" media="all" />
</head>

<body class="tmm-modal-body">
  <div class="layui-container">
    <form class="layui-form" action="">
      <div class="">新增产品：</div>
      <table class="layui-table" id="product_table">
        <colgroup>
          <col width="150">
          <col width="150">
          <col width="200">
          <col>
        </colgroup>
        <thead>
          <tr>
            <th width="65%">产品名称</th>
            <th width="35%">操作</th>
          </tr>
        </thead>
        <tbody>
          <tr data-type="0">
            <td>
              <select  name="name1" class="layui-select" lay-verify="required" lay-filter="name1" lay-search>
                <option value="">产品名称</option>
                <c:forEach items="${goodsList}" var="goods">
                  <option price="${goods.innerPrice}" categoryPid="${goods.categoryPid}" value="${goods.id}">${goods.name}</option>
                </c:forEach>
              </select>
            </td>
            <td>
              <a class="tmm-btn" data-type="switchCustom">自定义产品</a>
              <a class="tmm-btn" data-type="add">新增</a>
              <a class="tmm-btn" data-type="delete">删除</a>
            </td>
          </tr>
        </tbody>
      </table>
    </form>
  </div>

  <div style="display: none;">
    <table id="product_template">
      <tr data-type="0">
        <td>
          <select name="name1" class="layui-select" lay-verify="required" lay-filter="name1" lay-search>
            <option value="">产品名称</option>
            <c:forEach items="${goodsList}" var="goods">
              <option price="${goods.innerPrice}" categoryPid="${goods.categoryPid}" value="${goods.id}">${goods.name}</option>
            </c:forEach>
          </select>
        </td>
        <td>
          <a class="tmm-btn" data-type="switchCustom">自定义产品</a>
          <a class="tmm-btn" data-type="add">新增</a>
          <a class="tmm-btn" data-type="delete">删除</a>
        </td>
      </tr>
      <tr data-type="1">
        <td>
          <div class="layui-input-inline">
            <div class="layui-inline">
              <select name="categoryPid" id="categoryPid" lay-filter="categoryPid" class="categoryPid">
                <option value="">一级类目</option>
                <c:forEach items="${categoryPid}" var="category">
                  <option value="${category.id}">${category.name}</option>
                </c:forEach>
              </select>
            </div>
            <div class="layui-inline">
              <select name="doctorId" id="doctorId" lay-filter="doctor" class="doctor">
                <option value="">选择医生</option>
                <c:forEach items="${doctorList}" var="doctor">
                  <option value="${doctor.id}">${doctor.name}</option>
                </c:forEach>
              </select>
            </div>
            <div class="layui-inline">
              <input type="text" name="name3" placeholder="" value="" class="layui-input custom">
            </div>
          </div>
        </td>
        <td>
          <a class="tmm-btn" data-type="switchStandard">标准产品</a>
          <a class="tmm-btn" data-type="add">新增</a>
          <a class="tmm-btn" data-type="delete">删除</a>
        </td>
      </tr>
    </table>
  </div>
  <script src="../../static/lib/layui/layui.js"></script>
  <script>
    layui.config({
      base: "../../static/js/"
    }).extend({
      index: 'index'
    }).use(['index', 'form'], function () {
      var $ = layui.$,
      form = layui.form;

        window.getProducts = function() {
        var d = [{
          name: 'aaaaa',
          id: '2'
        }];
        return d;
      }

      var productOps = {
        switchStandard: function () {
          var d = $("#product_template tr[data-type='0']").clone(true);
          $(this).parents('tr').replaceWith(d);

          form.render('select');

          return false;
        },

        switchCustom: function () {
          var d = $("#product_template tr[data-type='1']").clone(true);
          $(this).parents('tr').replaceWith(d);

          form.render('select');

          return false;
        },

        add: function () {
          var d = $(this).parents('tr').clone(true);
          $(d.find('input')).val('');
          $(d.find('select')).val('');
          $(this).parents('tbody').append(d);

          form.render('select');

          return false;
        },

        delete: function () {
          if ($(this).parents('tbody').children().length > 1) {
            $(this).parents('tr').remove();
          }

          return false;
        },
      };

      $("#product_table .tmm-btn").on("click", function () {
        var type = $(this).data("type");
        productOps[type] ? productOps[type].call(this) : "";
      });

      $("#product_template .tmm-btn").on("click", function () {
        var type = $(this).data("type");
        productOps[type] ? productOps[type].call(this) : "";
      });
    })
  </script>
</body>

</html>